<template>
  <div>
    <div>
      <p>门店查询</p>
      <div>
        <el-input placeholder="请输入项目名称" v-model="name" clearable>
        </el-input>
        <el-button type="primary" @click="selectShop">查询</el-button>
      </div>
    </div>
    <el-table :data="currentData" stripe style="width: 100%">
      <el-table-column prop="id" label="商户ID" align="center">
      </el-table-column>
      <el-table-column prop="name" label="企业名称" align="center">
      </el-table-column>
      <el-table-column prop="postbox" label="登录邮箱" align="center">
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
            {{scope.row.state === 0 ? "正常" : "屏蔽" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="checkState" label="入驻状态" align="center">
        <template slot-scope="scope">
          {{scope.row.checkState | stateCompare}}
        </template>
      </el-table-column>
      <el-table-column prop="regTime" label="注册时间" align="center">
        <template slot-scope="scope">
          {{scope.row.regTime | timestampToTime}}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="操作" align="center">
        <template slot-scope="scope">
          <el-tag @click="showShop(scope.row)" class="btn">详情</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :page-size="5" :total="currentData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Store',
  data () {
    return {
      tableData: [],
      //分页
      currentPage: 1,
      name: ''
    };
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
    },
    showShop (row) {
      console.log(row.id);
      // this.$router.push('details')
      this.$router.push({ name: 'details', query: row.id })
    },
    //查询所有的商店
    getAllShop () {
      this.$axios({
        url: '/shop/getAllShop',
        method: 'get',
      }).then((res) => {
        // console.log(res);
        this.tableData = res.data
      })
    },
    //条件查询
    selectShop () {
      if (this.name === '') {
        this.getAllShop()
      } else {
        this.$axios({
          url: '/shop/selectShop',
          method: 'get',
        }).then((res) => {
          this.tableData = []
          this.name = ''
          this.tableData.push(res.data)
        })
      }
    }
  },
  mounted () {
    this.getAllShop()
  },
  computed: {
    currentData () {
      let start = (this.currentPage - 1) * 5;
      let end = start + 5;
      end > this.tableData.length
        ? (end = this.tableData.length)
        : (end = end);
      return this.tableData.slice(start, end);
    },
  },
  watch: {},

};
</script>

<style  lang="less" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
</style>
